<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.spaceName" placeholder="Space Name" clearable style="width: 180px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-select v-model="listQuery.category" placeholder="Category" filterable clearable style="width: 130px" class="filter-item">
        <el-option v-for="item in categories" :key="item.code" :label="item.text" :value="item.code" />
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">Search</el-button>
      <router-link :to="{name: 'CreateMemorySpace' }">
        <el-button v-waves class="filter-item" type="primary" plain icon="el-icon-plus">New</el-button>
      </router-link>
    </div>

    <el-row v-loading="listLoading" :gutter="40" class="panel-group">
      <el-col v-for="row in list" :key="row.id" :xs="12" :sm="12" :lg="8" class="card-panel-col">
        <router-link :to="{name: 'SpaceHome', params: row }" @contextmenu.prevent.native="openMenu(row, $event)">
          <div class="card-panel">
            <div class="card-panel-icon-wrapper icon-people">
              <svg-icon icon-class="net-disk" class-name="card-panel-icon" />
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">{{ row.spaceName }}</div>
              <span style="color: #be2a05;">{{ row.free | formatCapacity() }}</span> used of
              <span style="color: #2216c5;">{{ row.capacity | formatCapacity() }}</span>
              <div class="line">{{ row.aliasName }}</div>
              <div class="line">{{ row.purpose }}</div>
            </div>
          </div>
          <el-progress :percentage="Math.round(( row.free / row.capacity ) * 100)" :stroke-width="8" :color="colors" />
        </router-link>
      </el-col>
    </el-row>
    <SpaceAttribute ref="dialog" />

    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
      <router-link :to="{name: 'SpaceHome', params: selected }">
        <li>Open</li>
      </router-link>
      <router-link :to="{name: 'EditMemorySpace', params: selected }">
        <li>Edit</li>
      </router-link>
      <li @click="handleDelete(selected.id)">Delete</li>
      <li @click="handleAttribute(selected)">Attribute</li>
      <li style="color: #666;">Cancel</li>
    </ul>
  </div>
</template>

<script>
import { fetchAll, deleteMemorySpace } from '@/api/usr/memory-space'
import waves from '@/directive/waves' // waves directive
import SpaceAttribute from './components/SpaceAttribute'

export default {
  name: 'MemorySpace',
  directives: { waves },
  components: { SpaceAttribute },
  data() {
    return {
      list: null,
      listLoading: true,
      listQuery: {
        spaceName: undefined,
        category: undefined,
        asc: undefined,
        desc: undefined
      },
      colors: [
        { color: '#6f7ad3', percentage: 20 },
        { color: '#1989fa', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#e6a23c', percentage: 80 },
        { color: '#f56c6c', percentage: 100 }
      ],
      visible: false,
      top: 0,
      left: 0,
      selected: { id: 0 }
    }
  },
  computed: {
    categories() {
      return this.$store.getters.dictionaries.filter(category => category.dictGroup === 'space_category')
    }
  },
  watch: {
    visible(value) {
      if (value) {
        document.body.addEventListener('click', this.closeMenu)
      } else {
        document.body.removeEventListener('click', this.closeMenu)
      }
    }
  },
  created() {
    this.getAll()
  },
  methods: {
    getAll() {
      this.listLoading = true
      fetchAll(this.listQuery)
        .then(response => {
          this.list = response.result
          this.listLoading = false
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    openMenu(row, e) {
      const menuMinWidth = 105
      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
      const offsetWidth = this.$el.offsetWidth // container width
      const maxLeft = offsetWidth - menuMinWidth // left boundary
      const left = e.clientX - offsetLeft + 15 // 15: margin right

      if (left > maxLeft) {
        this.left = maxLeft
      } else {
        this.left = left
      }

      this.top = e.clientY
      this.visible = true
      this.selected = row
    },
    closeMenu() {
      this.visible = false
    },
    handleFilter() {
      this.getAll()
    },
    handleDelete(id) {
      this.$confirm('Confirm delete record?', 'Warning', {
        confirmButtonText: 'Confirm',
        cancelButtonText: 'Cancel',
        type: 'warning'
      }).then(() => {
        deleteMemorySpace(id).then(response => {
          this.$message({
            type: 'success',
            message: 'Delete Successfully!'
          })
          this.getAll()
        })
      })
    },
    handleAttribute(row) {
      this.$refs.dialog.$emit('open', row)
    }
  }
}
</script>

<style lang="scss" scoped>
.contextmenu {
  margin: 0;
  background: #fff;
  z-index: 3000;
  position: absolute;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #09aaff;
  border: 1px solid #09aaff;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
  li {
    margin: 0;
    padding: 7px 16px;
    cursor: pointer;
    &:hover {
      background: rgb(214, 207, 103);
    }
  }
}

.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(17, 14, 165, 0.4);
    border-color: rgba(0, 0, 0, 0.05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }
      .icon-people {
        background: #40c9c6;
      }
      .icon-message {
        background: #36a3f7;
      }
      .icon-money {
        background: #f4516c;
      }
      .icon-shopping {
        background: #34bfa3;
      }
    }

    .icon-people {
      color: #40c9c6;
    }
    .icon-message {
      color: #36a3f7;
    }
    .icon-money {
      color: #f4516c;
    }
    .icon-shopping {
      color: #34bfa3;
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: left;
      font-weight: bold;
      margin: 20px 0 0 30px;

      .card-panel-text {
        line-height: 18px;
        // color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 8px;
      }
      .line {
        margin-top: 4px;
        width: 100%;
        word-break: normal;
        display: block;
        white-space: pre-wrap;
        overflow: hidden;
      }
    }
  }
}

@media (max-width: 550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>
